<template>
  <div class="app-container">
    <generate-form ref="generateForm" :data="jsonData" :remote="remoteFuncs" :value="editData" />
    <div class="generate-block">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <generate-form ref="generateForm" :data="jsonData2" :remote="remoteFuncs" :value="editData" />
    <div class="generate-block">
      <router-link to="/PrivateLibrary/BankReconciliationProcessing/ManualRepairAccount">
        <el-button type="primary">显示未清项</el-button>
      </router-link>
      <el-button type="primary">重置</el-button>
    </div>
  </div>
</template>
<script>
import GenerateForm from '@/components/CreateForm/GenerateForm'
import '@/components/CreateForm/styles/FormCreate.css'
import GenerateTable from '@/components/CreateTable/GenerateTable'
export default {
  components: {
    GenerateForm,
    GenerateTable
  },
  data: function() {
    return {
      jsonData: { 'list': [{ 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '公司代码', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1541658842000_26318' }, 'key': '1541658842000_26318', 'model': 'input_1541658842000_26318', 'rules': [] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '开户单位', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1541658895000_15973' }, 'key': '1541658895000_15973', 'model': 'input_1541658895000_15973', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1541658839000_56967' }, 'key': '1541658839000_56967', 'model': 'grid_1541658839000_56967', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '银行账号', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1541659074000_65832' }, 'key': '1541659074000_65832', 'model': 'input_1541659074000_65832', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [{ 'type': 'input', 'name': '会计年度', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1541659093000_25216' }, 'key': '1541659093000_25216', 'model': 'input_1541659093000_25216', 'rules': [] }] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1541658904000_48467' }, 'key': '1541658904000_48467', 'model': 'grid_1541658904000_48467', 'rules': [] }, { 'type': 'grid', 'name': '栅格布局', 'icon': 'th', 'columns': [{ 'span': 10, 'list': [{ 'type': 'input', 'name': '期间', 'icon': 'regular/keyboard', 'options': { 'width': '100%', 'defaultValue': '', 'required': false, 'dataType': 'string', 'pattern': '', 'placeholder': '', 'readonly': false, 'disabled': false, 'clearable': false, 'remoteFunc': 'func_1541659172000_20017' }, 'key': '1541659172000_20017', 'model': 'input_1541659172000_20017', 'rules': [{ 'type': 'string', 'message': '单行文本格式不正确' }] }] }, { 'span': 10, 'list': [] }], 'options': { 'gutter': 0, 'justify': 'start', 'align': 'top', 'remoteFunc': 'func_1541659118000_39542' }, 'key': '1541659118000_39542', 'model': 'grid_1541659118000_39542', 'rules': [] }], 'config': { 'labelWidth': 100, 'labelPosition': 'right' }, 'table': { 'showRemove': false, 'showIndexCol': false, 'showEdit': false, 'showExport': false, 'showAdd': false, 'stripe': true, 'border': true }},
      jsonData2:
        {
          'list': [
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '开户行及账号',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541659526000_38011'
                      },
                      'key': '1541659526000_38011',
                      'model': 'input_1541659526000_38011',
                      'rules': []
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': []
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541659211000_94768'
              },
              'key': '1541659211000_94768',
              'model': 'grid_1541659211000_94768',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '企业银行存款日记账余额',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541660973000_88100'
                      },
                      'key': '1541660973000_88100',
                      'model': 'input_1541660973000_88100',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '银行对账单余额',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541660985000_44267'
                      },
                      'key': '1541660985000_44267',
                      'model': 'input_1541660985000_44267',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541660967000_68719'
              },
              'key': '1541660967000_68719',
              'model': 'grid_1541660967000_68719',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '加：银行已收、企业未收款',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541660995000_55811'
                      },
                      'key': '1541660995000_55811',
                      'model': 'input_1541660995000_55811',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '加：企业已收、银行未收款',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541661006000_57388'
                      },
                      'key': '1541661006000_57388',
                      'model': 'input_1541661006000_57388',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541660988000_30269'
              },
              'key': '1541660988000_30269',
              'model': 'grid_1541660988000_30269',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '减：银行已付、企业未付款',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541661022000_27071'
                      },
                      'key': '1541661022000_27071',
                      'model': 'input_1541661022000_27071',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '减：企业已付、银行未付款',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541661031000_66131'
                      },
                      'key': '1541661031000_66131',
                      'model': 'input_1541661031000_66131',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541661014000_74292'
              },
              'key': '1541661014000_74292',
              'model': 'grid_1541661014000_74292',
              'rules': []
            },
            {
              'type': 'grid',
              'name': '栅格布局',
              'icon': 'th',
              'columns': [
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '调节后存款余额',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541661043000_40561'
                      },
                      'key': '1541661043000_40561',
                      'model': 'input_1541661043000_40561',
                      'rules': [
                        {
                          'type': 'string',
                          'message': '单行文本格式不正确'
                        }
                      ]
                    }
                  ]
                },
                {
                  'span': 10,
                  'list': [
                    {
                      'type': 'input',
                      'name': '调节后存款余额',
                      'icon': 'regular/keyboard',
                      'options': {
                        'width': '100%',
                        'defaultValue': '',
                        'required': false,
                        'dataType': 'string',
                        'pattern': '',
                        'placeholder': '',
                        'readonly': false,
                        'disabled': true,
                        'clearable': false,
                        'remoteFunc': 'func_1541661051000_44346'
                      },
                      'key': '1541661051000_44346',
                      'model': 'input_1541661051000_44346',
                      'rules': []
                    }
                  ]
                }
              ],
              'options': {
                'gutter': 0,
                'justify': 'start',
                'align': 'top',
                'remoteFunc': 'func_1541661036000_70819'
              },
              'key': '1541661036000_70819',
              'model': 'grid_1541661036000_70819',
              'rules': []
            }
          ],
          'config': {
            'labelWidth': 100,
            'labelPosition': 'right'
          },
          'table': {
            'showRemove': false,
            'showIndexCol': false,
            'showEdit': false,
            'showExport': false,
            'showAdd': false,
            'stripe': true,
            'border': true
          }
        },
      editData: {},
      values: {},
      remoteFuncs: {

      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.generateForm.getData().then(data => {
        // 数据校验成功
        // data 为获取的表单数据
      }).catch(e => {
        // 数据校验失败
      })
    }
  }
}
</script>
